<template>
    <div class="mui-content">
        <div  class="mui-slider mui-fullscreen">
            <div class="mui-slider-group">
                <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
                    <div id="scroll1" class="mui-scroll-wrapper" >
                        <div class="mui-scroll">
                            <!--询价订单-->
                            <div class="carlist biding">
                                <div class="c">
                                    <ul class="mui-table-view">
                                        <li v-for="(v,i) in bidingList"> 
                                            <div v-if="v.state != 1 && v.state != 5">
                                                <crossLine></crossLine>
                                                <div class="lstTop">
                                                    <div class="titpic">
                                                        <img style="float:left;" src="static/img/hqgic.png" alt="">
                                                        <span style="float:left;color:#333333;">江苏环球港汽车城</span>
                                                        <span style="float:right;">{{v.paymentNumber}}</span>                                                  
                                                    </div>
                                                </div>
                                                <div class="lst" @tap="goLineItem(v)">
                                                    <div class="lstImg" v-if="v.pic==null || v.pic==''">
                                                        <img src="static/img/noCarPic.png">
                                                    </div>
                                                    <div class="lstImg" v-else>
                                                        <img :src="$store.state.appData.imgUrl+v.pic">
                                                    </div>
                                                    <div class="lstMsg">
                                                        <p class="carName">{{v.carName}}</p>
                                                        <p class="carColor">颜色:<span>{{v.color}}</span></p>
                                                        <p class="carPrice">指导价:{{v.guidePrice}}万
                                                            <span style="color:#ff6a27;float:right;">{{getBiddingStatus(v.state)}}</span>
                                                        </p>
                                                    </div>
                                                </div>
                                                <div class="lstbottom" style="position:relative;"  v-show="v.state==6">
                                                    <div class="carNaked">
                                                        <p>询价金:￥{{initPrice(v.orderPrice)}}</p>
                                                        <p v-if="v.bidPrice">报价:￥{{initPriceYuan(v.bidPrice)}}</p>
                                                        <p v-else  class="carNaked-left">正在询价，请耐心等待</p>
                                                        <!-- <p v-if="v.netPrice">裸车价:￥{{v.netPrice}}</p>
                                                        <p v-else>暂无裸车价</p> -->
                                                    </div>
                                                    <p class="carMsg">&nbsp;</p>
                                                    <div class="placeOrder" @tap="goPayment(v)">去付款</div>
                                                </div>
                                                <div class="lstbottom" style="position:relative;"  v-show="v.state==0">  
                                                  <!-- <div class="lstbottom" style="position:relative;" > -->    
                                                    <div class="carNaked">
                                                        <p>询价金:￥{{initPrice(v.orderPrice)}}</p>
                                                        <p v-if="v.bidPrice">报价:￥{{initPriceYuan(v.bidPrice)}}</p>
                                                        <p v-else  class="carNaked-left">正在询价，请耐心等待</p>
                                                    <!--   <p v-if="v.netPrice">裸车价:￥{{v.netPrice}}</p>
                                                        <p v-else>暂无裸车价</p> -->
                                                    </div>
                                                    <p class="carMsg">&nbsp;</p>
                                                    <!-- <div class="confirmDel">去付款</div> -->
                                                    <!--  <div class="confirmDel" @tap="refund(v.carId, v.state)" >申请退款</div> -->
                                                    <div class="affirmCrowdorder" :class="v.bidPrice? '':'unuse'"  @tap="affirmCrowdorder(v)">转入拼单</div>
                                                    <div class="placeOrder"  :class="v.bidPrice? '':'unusePay'" @tap="placeOrder(v)" >立即下单</div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--空时显示-->
            <div class="empty ng-scope" v-if="bidingList.length === 0 ">
                <div class="empty-item">
                    <div class="icon-zanwudingdan-01" style="font-size:5rem;text-align:center;color:#999;">
                        
                    </div>
                    <div class="item-text">暂无相关订单</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    /* 询价订单状态
     *  0 支付成功
     *  1 转入拼单
     *  2 申请退款
     *  3 退款正在处理...
     *  4 退款成功
     *  5 转入订单
     *  6 微信调用支付失败
     */
    import 'static/js/mui.pullToRefresh.js'
    import 'static/js/mui.pullToRefresh.material.js'
    import mui from 'static/js/mui'
    import crossLine from '@/components/base/cross-line/cross-line'
    import payment from '@/components/order-form/biding/payment/payment'
    import {findListByCustomerId, refund, findByCustomerId} from '@/api/order'
    import utils from '@/utils/utils'
    import storage from '@/utils/localstorage'
    export default {
        data() {
            return {
                cc:2,
                bidingList: [

                ],
                userInfo:{},
                //询价事件请求参数
                bidingData:{
                    customerId: '',
                    pageNow: 0,
                    pageSize: 5
                }
            };
        },
        components: {
            crossLine
        },
        props: {},
        watch: {},
        methods: {
            //如果订单支付失败 则重新支付
            goPayment(v) {
                this.$router.push({
                    name: "payAgain",
                    params: {
                        bidingOrderId:v.paymentNumber,
                    }
                })
            },
            goLineItem(v) {
                this.$router.push({
                    name: "lineItem",
                    params: {
                        currentCar:v,
                    }
                })
            },
            //判断是什么询价状态
            getBiddingStatus(status) {
                switch(status){
                    case 0:
                    return '询价金付款成功';
                    case 2:
                    return '申请退款中...';
                    case 3:
                    return '正在处理退款...';
                    case 4:
                    return '已退款成功';
                    case 6:
                    return '询价金付款失败';
                }
            },
            // 下单页面 支付下单金额 
            placeOrder(v){
                if(!v.bidPrice){
                    mui.alert('无报价，无法立即下单！', '提示', ['确定'], function() {},'div')
                    return
                }
                // //console.log(v)
                this.$router.push({
                    name: "bidingPo",
                    params: {
                        carParams: v,
                    }
                })
            },
            //退款
            refund(carId,state) {
                //先要打通获取询价列表
                if(state == 0){
                    refund(this.userInfo.id, carId).then(res=>{
                        if(res.msg == 'success'){
                            mui.alert('退款申请成功！', '提示', ['确定'], function() {},'div')
                        }
                    })
                }
            },
            //转入拼单
            affirmCrowdorder(v) {
                if(!v.bidPrice){
                    mui.alert('无报价，无法转入拼单', '提示', ['确定'], function() {},'div')
                    return
                }
                this.$router.push({
                    name: "affirmCrowdorder",
                    params: {
                        carParams: v,
                        customerId: this.userInfo.id
                    }
                })
            },
            // 创建页面时首次加载数据
            getFirstData() {
                // mui.toast("为你推荐了5篇文章");

                this.bidingData.pageNow++
                this.userInfo = storage.getLocalstorage('user')
                this.bidingData.customerId = this.userInfo.id
                findListByCustomerId(this.bidingData).then(resp => {
                    this.cc=resp.data.page.totalPageCount
                    if(resp.msg=="success"){
                        this.bidingList = this.bidingList.concat(resp.data.bidCars)     
                    }else{
                        //console.log("接口不通")
                    }
                })
            },
            initPrice(price) {
                let priceVal = utils.formatMoney(price,2)
                return priceVal
            },
            initPriceYuan(formartPrice) {
                let price = utils.formatMoney(formartPrice, 2,status = 0)
                return price
            },
        },
        filters: {},
        computed: {},
        created() {
            this.getFirstData()
        },
        mounted(){
            var that=this
            mui.init({
                keyEventBind: {
                    backbutton: true  //关闭back按键监听
                }    
            });
			(function($) {
				//阻尼系数
				var deceleration = mui.os.ios?0.003:0.0009;
				$('.mui-scroll-wrapper').scroll({
					bounce: false,
					indicators: true, //是否显示滚动条
					deceleration:deceleration
				});
				$.ready(function() {
					//循环初始化所有下拉刷新，上拉加载。
					$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
						$(pullRefreshEl).pullToRefresh({
                            //下拉刷新
							down: {
								callback: function() {
                                    var self = this;
                                    //判断上拉加载的时候如果参数当前页(pageNow)大于总页数那么禁止下拉加载并且返回不执行下面的代码
                                    //if(that.bidingData.pageNow>that.cc){
                                        //显示正在刷新后合上的动画效果  就是关闭刷新的
                                    //    self.endPullDownToRefresh();
                                     //   return
                                    //}
									setTimeout(function() {
                                        // mui.toast("为你推荐了5篇文章");
                                        that.bidingData.pageNow = 1
                                        that.userInfo = storage.getLocalstorage('user')
                                        that.bidingData.customerId = that.userInfo.id
                                        findListByCustomerId(that.bidingData).then(resp => {
                                            // //console.log(that.bidingData)
                                            that.cc=resp.data.page.totalPageCount
                                            if(resp.msg=="success"){
                                                //that.bidingList = resp.data.bidCars
                                                that.bidingList = resp.data.bidCars
                                                // that.bidingList.concat(resp.data.bidCars)
                                                /*  for(var i  in  resp.data.bidCars){
                                                        //这里的意思就是在数组的起始位置添加元素 而且是一个个添加
                                                        that.bidingList = resp.data.bidCars[i]
                                                } */
                                                //console.log(that.bidingList)
                                            }else{
                                                //console.log("接口不通")
                                            }
                                        })
										self.endPullDownToRefresh();
									}, 800);
								}
							},
                            //上拉加载
							up: {
                                // auto:false,//一加载页面 就执行一次
                                height:50,// 可选.默认50.触发上拉加载拖动距离
                                contentrefresh: '正在刷新...',
                                contentnomore:'没有更多数据了',// 可选，请求完毕若没有更多数据时显示的提醒内容；
								callback: function() {
                                    var self = this;
                                    //console.log(self)
                                    //判断下拉刷新的时候如果参数当前页(pageNow)大于总页数那么禁止上拉加载并且返回不执行下面的代码
                                    if(that.bidingData.pageNow>that.cc){
                                        self.endPullUpToRefresh((that.bidingData.pageNow>that.cc));
                                        return
                                    }
									setTimeout(function() {
                                        that.bidingData.pageNow++//当前页++
                                        that.userInfo = storage.getLocalstorage('user')
                                        that.bidingData.customerId = that.userInfo.id
                                        //下拉刷新的时候如果参数当前页(pageNow)大于总页数那么禁止上拉加载
                                        findListByCustomerId(that.bidingData).then(resp => {//请求数据
                                            // //console.log(resp)
                                            that.cc=resp.data.page.totalPageCount
                                            if(resp.msg=="success"){
                                                that.bidingList = that.bidingList.concat(resp.data.bidCars)
                                                /* for(var i  in  resp.data.bidCars){
                                                    //遍历所有请求后拿过来的数据 然后将数据一个个放入新的数组中来刷新数据
                                                    that.bidingList.push(resp.data.bidCars[i])
                                                } */
                                            }else{
                                                //console.log("接口不通")
                                            }
                                        })
										self.endPullUpToRefresh((that.bidingData.pageNow>that.cc));
									}, 800);
								}
							}
						});
					});
                  
				});
            })(mui);
            //首页返回键处理
            //处理逻辑：1秒内，连续两次按返回键，则退出应用；
            var first = null;
            mui.back = function() {
                //首次按键，提示‘再按一次退出应用’
                if (!first) {
                    first = new Date().getTime();//记录第一次按下回退键的时间
                    mui.toast('再按一次退出应用');//给出提示
                    // history.go(-1)//回退到上一页面
                    setTimeout(function() {//1s中后清除
                        first = null;
                    }, 1000);
                } else {
                    if (new Date().getTime() - first < 1000) {//如果两次按下的时间小于1s，
                        plus.runtime.quit();//那么就退出app
            } } };
        }
    };

</script>


<style lang="scss" scoped>
    .mui-bar-nav ~ .mui-content {
        padding-top:0px; 
    }
    /*订单*/
    .placeOrder{
        border-radius: 3px;
        //background:#ff6a27;
        color: #ff6a27;
        position: absolute;
        right:10px;
        top: 41px;
        padding: 0px 5px 0px 5px;
        font-size: 0.6rem;
        border: 1px solid #ff6a27;
    }
    .confirmDel {
        border-radius: 3px;
        border: 1px solid #ff6a27;
        color: #ff6a27;
        position: absolute;
        right:140px;
        top: 41px;
        padding: 0px 5px 0px 5px;
        font-size: 0.6rem;
    }
    /*转入拼单*/
    .affirmCrowdorder {
        border-radius: 3px;
        border: 1px solid #ff6a27;
        color: #ff6a27;
        position: absolute;
        right:75px;
        top: 41px;
        padding: 0px 5px 0px 5px;
        font-size: 0.6rem;
    }
    /*点击后的样式*/
    .active {
        color: #ff6a27;
        border-bottom: 1px solid #ff6a27;
    }
    /*下单样式*/
    .order-from {
        .order-nav {
            width: 100%;
            height: 2rem;
            background: #fff;
            display: flex;
            text-align: center;
            font-size: 0.7rem;
            border-bottom: 1px solid #e9e9e9;
            .tab-itm {
                flex: 1;
                line-height: 2rem;
            }
        }
    }
    /*车型选择*/
    .carlist {
        margin-top:40px;
        width: 100%;
        .lst {
            width: 100%;
            background: #fbfbfb;
            overflow: hidden;
            padding: 10px 12px 0px 12px;
            .lstImg {
                width: 38%;
                float: left;
                text-align: center;
                img {
                    width:120px;
                    vertical-align: middle;
                }
            }
            .lstMsg {
                width:62%;
                float: left;
                height: 100%;
                padding: 6px 0px 5px 15px;
                p {
                    text-overflow: ellipsis;
                    overflow: hidden;
                    word-wrap: break-word;
                    word-break: normal;
                    margin-bottom: 10px;
                }
            }
        }
        .lstbottom {
            width: 100%;
            background: #fff;
            overflow: hidden;
            padding: 0px 12px 0px 12px;
            p {
                margin-bottom: 0px;
                line-height: 35px;
            }
        }
        .lstTop{
            width:100%;
            background:#fff;
            font-size:0.6rem;
            line-height:36px;
            .titpic {
                overflow:hidden;
                padding:0px 12px 0px 8px;
                img{
                    width:36px;
                    height:36px;
                    margin-right:5px;
                    margin-top:3px;
                }
            }
            
        }
    }
    .carName {
        font-size: 0.7rem;
        color: #333;
        line-height: 15px;
        height: 28px;
    }

    .carColor {
        font-size: 0.6rem;
        line-height: 15px;
    }

    .carPrice {
        font-size: 0.6rem;
        line-height: 15px;
    }

    .carNaked {
        text-align: right;
        border-bottom: 1px solid #f0f0f0;
        font-size: 0.7rem;
        color: #333;
    }
    .carNaked-left{
        float:left;
        color:#666666;
        font-size:12px;
        margin-left:0px;
    }
    .carNaked p{
        display: inline-block;
        margin-left:10px;
    }
    .unuse{
        border: 1px solid #ccc!important;
        color: #8f8f94!important;
    }
    .unusePay{
        border: 1px solid #ccc !important;
        color: #8f8f94 !important;
        background:#fff !important;
    }

     /* 商品空时 */
    .empty {
        position: relative;
        display: block;
        width: 100%;
        position:absolute;
        top:40px;
        z-index:99;
        bottom:0px;
        overflow: hidden;
        background:#fff;
    }

    .empty .empty-item {
        position: absolute;
        left: 0;
        top: 35%;
        display: block;
        width: 100%;
    }

    .empty .empty-item .item-logo {
        display: block;
        margin: 0 auto;
        width: 80px;
        height: 80px;
    }

    .empty .empty-item .item-text {
        display: block;
        height: 32px;
        line-height: 32px;
        color: #aaaaaa;;
        font-size: 14px;
        font-weight: normal;
        overflow: hidden;
        text-align: center;
    }   
</style>